<template>
	<!--
	    author: 李文昊
		mid-content:总包裹
	    mid-content-ul: 单行包裹
		content-item:单项包裹
		toUrl：跳转方法
		nav-imgbo:图片
		nav-span:房间名
	-->
	<view>
		<view class="mid-content">
			<view class="mid-content-ul" v-for="(it,inde) in rows" :key="inde">
				<view :style="{'width':viwidth}" class="content-item"
					v-for="(item,index) in navList.slice((it-1)*numberOfRows,numberOfRows+(it-1)*numberOfRows)"
					:key="index">
					<view class="toUrl" @click="toUrl(item.id)">
						<image class="nav-imgbo" :src="item.imgUrl" alt="暂无图片"></image>
						<view class="nav-item-p">
							<text class="nav-span">{{item.name + '(' + item.roomType + ')'}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			numberOfRows: Number,
			navList: Array
		},
		computed: {
			viwidth() {
				return 100 / this.numberOfRows + '%';
			},
			rows() {
				return Math.ceil(this.navList.length / this.numberOfRows);
			}
		},
		methods: {
			toUrl(value) {
				uni.navigateTo({
					url: '/pages/conferenceRoom/appointmentDetails/appointmentDetails?eventId=' + value
				});
			}
		}
	}
</script>

<style>
	.mid-content {
		width: 100%;
		font-size: 0;
	}

	.mid-content-ul {
		width: 100%;
		overflow: hidden;

	}

	.content-item {
		float: left;
		text-align: center;
		padding-bottom: 9rpx;
		border-right: 0rpx solid rgba(238, 238, 238, 1);
		font-size: 0;
	}

	.nav-imgbo {
		height: 100rpx;
		width: 170rpx;
		margin-top: 16rpx;
	}

	.nav-item-p {
		margin-top: 8rpx;
		text-align: center;
	}

	.nav-span {
		display: inline-block;
		/* width: 96rpx; */
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #212121;
	}

	a {
		text-decoration: none;
	}

	.router-link-active {
		text-decoration: none;
	}
</style>
